<template>
	<view class="container">
		<!-- 背景 -->
		<view class="bg"></view>
		<!-- 返回 -->
		<view class="back" @click="clickback">
			<image src="../../static/assets/home.png" mode=""></image>
		</view>
		<!-- 登录盒子 -->
		<view class="loginbox">
			<view class="tab">
				<block v-for="(item,index) in tablist" v-bind:key="item.id"> 
					<view :class="['tabitem',{'active':current==index}]" @click="addclick(index)">{{item.text}}</view>
				</block>
			</view>
			<view class="box">
				<view class="iptbox">
					<input type="text" value="" placeholder="请输入你的用户名" v-model="val1" />
				</view>
				<view class="iptbox">
					<input type="text" value="" placeholder="请输入你的账号" v-model="val2" />
				</view>
				<view class="iptbox" v-if="isRegister">
					<input type="password" value="" placeholder="请设置你的密码" v-model="val3" />
				</view>
				<view class="iptbox" v-if="isLogin">
					<input type="password" value="" placeholder="请输入密码" v-model="val4" />
				</view>
				<!-- 提交 -->
				<view class="submit" @click="toPersonal">Submit</view>
			</view>
		</view>
		<!-- <button type="default" @click="register()">zhuce</button> -->
		<!-- <button type="default" @click="login()">login</button> -->
		<!-- <button type="default" @click="update()">update</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[
					{text:'登录',id:0},
					{text:'注册',id:1},
					],
				current:0,
				isLogin:true,
				isRegister:false,
				val1:'',
				val2:'',
				val3:'',
				val4:'',
				// 注册列表
				registerList:[]
			}
		},
		onLoad(){
			// console.log(this.isLogin)
			uni.getStorage({
				key:"set_person",
				success:(res)=>{
					console.log(res.data)
					this.registerList=res.data;
				},
				fail: (err) => {//没有请求到数据
					console.log('暂无数据')
				}
			})
			console.log(this.registerList)
		},
		methods: {
			clickback(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			// tab选项
			addclick(index){
				this.current=index;
				if(this.current==1){//登录
					this.isRegister=true;
					this.isLogin=false;
				}
				else{
					//注册
					this.isRegister=false;
					this.isLogin=true;
				}
			},
			// 跳转个人中心
			toPersonal(){
				// 登录
				if(this.current==0){
					// console.log('login')
					let username=this.val1;
					let phone=this.val2;
					let psw=this.val4;
					if(username.length==0||phone.length==0||psw.length==0){
						console.log('输入信息不完整');
					}
					else{
						this.login2(phone,psw,username);//
					}
				}
				// 注册
				else if(this.current==1){
					// console.log('register');
					let username=this.val1;
					let phone=this.val2;
					let password=this.val3;
					if(username.length==0||phone.length==0||password.length==0){
						console.log('输入信息不完整');
					}
					else{
						this.register2(phone,username,password);
					}
				}
			},
			// 注册方法（果创云请求接口）
			register(tel,uname,psw){
				uni.request({
				    url: 'http://hn216.api.yesapi.cn/?',
					data:{
						s:"App.Table.CheckCreate",
						model_name:"ouzilin",
						app_key:"A27B667E697D5B8059341DE209CBEA68",
						data:{//参数
							"user_id":1,
							"phone":tel,//传参 电话号码
							"username":uname,//传参 用户名
							"nick_name":psw,//传参 密码
							"first_login_time":"CURRENT_TIMESTAMP",
							"is_admin":0,
							"id":1,
							"uuid":"05",
							},
						check_field:"phone"
					},
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			},
			// 注册方法2（无请求接口 存本地）
			register2(tel,uname,psw){
				// 创建对象
				let token={
					username:uname,
					phone:tel,
					correctpsw:psw
				}
				let temp=-1;//是否已注册标识
				if(this.registerList.length==0){
					// 还没有用户注册过
					console.log('还没有用户注册过')
					this.registerList.push(token)
					console.log(this.registerList)
					uni.setStorage({
						key:"set_person",
						data:this.registerList,
						success:function(){
							uni.showToast({
								icon:"success",
								title:"注册成功"
							});
						}
					})
				}
				else{
					// 已经有用户注册过
					this.registerList.forEach((item,index)=>{
						if(item.phone==tel){
							temp=index;// 已经被注册过
							uni.showToast({
								icon:"error",
								title:"已经被注册过"
							});
						}
					})
					if(temp==-1){//还没有被注册过
						this.registerList.push(token);
						uni.setStorage({
							key:"set_person",
							data:this.registerList,
							success:function(){
								uni.showToast({
									icon:"success",
									title:"注册成功"
								});
							}
						})
					}
				}
				
			},
			// 登录 （果创云请求接口）
			login(phone){
				uni.request({
				    url: 'http://hn216.api.yesapi.cn/?',
					data:{
						s:"App.Table.FreeFindOne",
						return_data:0,
						model_name:"ouzilin",//模型名称
						app_key:"A27B667E697D5B8059341DE209CBEA68",//appkey
						logic:"and",
						// 通过账号(唯一索引)查找用户信息
						where:'[["phone", "=",'+ phone+']]',//传参电话
						fields:"nick_name"//通过传电话号码找到对应密码 看是否匹配
					},
				    success: (res) => {//请求成功
				        console.log(res.data);
						let correctPsw=res.data.data.data.nick_name;
						console.log(correctPsw);//获取到正确的密码
						// console.log(this.val4)
						if(this.val4===correctPsw){//匹配成功
							console.log('登录成功');
							let token={
							username:this.val1,
							phone:this.val2
							}
							uni.setStorage({
								key:'set_person',
								data:token,
								success(){
									console.log('用户登录成功')
								}
							});
							uni.switchTab({
								url:"../personal/personal"
							})
						}
						else{//匹配错误
							console.log('信息错误，请重新登录')
						}
				    }
				});
			},
			login2(tel,psw,uname){
				let token={
					username:uname,
					phone:tel,
					correctpsw:psw
				}
				// 通过电话找到该条数据 获取正确的密码 进行匹配
				if(this.registerList.length==0){
					uni.showToast({
						title:"请先注册账号",
						icon:"error"
					})
				}
				else{
					this.registerList.forEach((item,index)=>{
						if(item.phone==tel){//该账号已经被注册过
							let getcorrectPsw=item.correctpsw;
							console.log(getcorrectPsw,psw)
							if(getcorrectPsw==psw){//密码正确
								uni.setStorage({
									key:"set_logined",
									data:token,
									success() {
										uni.showToast({
											title:"登录成功",
											icon:"success"
										});
										uni.switchTab({
											url:"../personal/personal"
										})
									}
								})
							}
							else{
								uni.showToast({
									title:"信息错误，请重新登录",
									icon:"error"
								})
							}
						}
						else{//该账号未被注册过
							uni.showToast({
								title:"请先注册账号",
								icon:"error"
							})
						}
					})
				}
			},
			// 修改信息 （果创云请求接口）
			update(){
				uni.request({
				    url: 'http://hn216.api.yesapi.cn/?',
					data:{
						s:"App.Table.FreeUpdate",
						return_data:0,
						model_name:"ouzilin",
						logic:"and",
						where:'[["phone", "=", "123"]]',
						app_key:"A27B667E697D5B8059341DE209CBEA68",
						data:{"user_id":1,
						      "phone":123,
						      "username":"ooo",
						      "nick_name":"nihao",
						      "first_login_time":"CURRENT_TIMESTAMP",
						      "is_admin":0,
						      "id":1,
						      "uuid":"05"}
				},
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
.container{
	width:100%;
	height: 100%;
	.bg{
		width:100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-image: url(../../static/assets/bg.jpg);
		background-position:left center; 
		background-size: cover;
		opacity: 0.4;
	}
	.back{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: 5%;
		left: 5%;
		background-color: #585eaa;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.loginbox{
		width: 80%;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		.tab{
			width: 100%;
			display: flex;
			.tabitem{
				width: 50%;
				text-align: center;
				padding: 1rem 0;
				font-size: 1.1rem;
				background-color: #FFFFFF;
				color: #555555;
			}
			.active{
				background-color: #585eaa;
				color: #FFFFFF;
			}
		}
		
		.box{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			.iptbox{
				width: 90%;
				height: 80rpx;
				border: 1px solid #dddddd;
				margin-top: 20rpx;
				input{
					width: 90%;
					height: 90%;
					padding-left: 5rpx;
				}
			}
			.submit{
				width: 80%;
				height: 80rpx;
				margin-top: 30rpx;
				line-height: 80rpx;
				font-size: 1.1rem;
				text-align: center;
				color: #FFFFFF;
				background-color: #585eaa;
				border-radius: 20rpx;
			}
		}
	}
}
</style>
